<script setup lang="ts">
  import DisplayItem from '@/components/home/largeScreenDisplay/DisplayItem.vue';
  import DisplayBar from '@/components/home/largeScreenDisplay/DisplayBar.vue';
  import { reactive } from 'vue';
  import { IDataShow } from '@/api/types';
  import DisplayLine from '@/components/home/largeScreenDisplay/DisplayLine.vue';
  import DisplayBarYAxis from '@/components/home/largeScreenDisplay/DisplayBarYAxis.vue';

  let d = new Date();
  let xAxis = [] as string[];
  for (let i = 0; i < 20; i++) {
    let d1 = new Date(d.getFullYear(), d.getMonth(), d.getDate() - i);
    xAxis.push(`${d1.getMonth() + 1}月${d1.getDate()}日`);
  }
  xAxis.reverse();
  const showData = reactive<IDataShow>({
    xAxis,
    disData: [55, 39, 41, 38, 42, 46, 41, 44, 40, 44, 55, 63, 43, 43, 42, 32, 33, 32, 19, 42],
    disName: '新型冠状病毒肺炎',
    type: 'bar',
  });
  const showData1 = reactive<IDataShow>({
    xAxis,
    disData: [16, 14, 16, 16, 15, 11, 14, 14, 19, 17, 22, 27, 18, 13, 10, 13, 14, 7, 12, 12],
    disName: '结核病',
    type: 'line',
  });
  const showData2 = reactive<IDataShow>({
    xAxis,
    disData: [8, 17, 18, 13, 13, 14, 15, 12, 22, 24, 13, 14, 25, 16, 14, 20, 15, 10, 8, 12],
    disName: '病毒性肝炎',
    type: 'bar',
  });
</script>

<template>
  <DisplayItem>
    <DisplayBar class="h-[29vh]" :show-data="showData" />
    <DisplayLine class="h-[29vh]" :show-data="showData1" />
    <DisplayBarYAxis class="h-[29vh]" :show-data="showData2" />
  </DisplayItem>
</template>

<style lang="scss"></style>
